<template>
    <div>
        <section class="login_message">
            <mt-button class="btn" @click="Printer" v-if="!$store.getters.userInfo.sn && !$store.getters.userInfo.key">添加打印机</mt-button>
            <mt-button class="btn" @click="test" v-else>测试打印机</mt-button>
        </section>
        <mt-popup
        v-model="popupVisible">
            <p class="title">添加打印机</p>
            <section class="login_message">
                <input type="text" placeholder="请选择打印机品牌" v-model="brand" readonly>
            </section>
            <section class="login_message">
                <input type="text" placeholder="请填写编号(SN)" v-model="sn">
            </section>
            <section class="login_message">
                <input type="text" placeholder="请填写密匙(KEY)" v-model="key">
            </section>
            <p class="bottom">请查看打印机底部</p>
            <section class="login_message">
                <mt-button class="btn" @click="AddPrinter">添加</mt-button>
            </section>
        </mt-popup>
    </div>
</template>
<script>
import {addprinter,testPrinter} from '../api'
import {Toast} from "mint-ui"
export default {
    data() {
        return {
            popupVisible:false,
            sn:"",
            key:"",
            brand:"飞鹅"
        }
    },
    methods:{
        test(){
                const data={
                    token:this.$store.getters.token
                }
                testPrinter(data).then(res=>{
                    // console.log(res);
                    Toast("正在打印,请留意打印机是否开机联网")
                })
            },
        Printer(){
            this.popupVisible = !this.popupVisible
        },
        AddPrinter(){
            this.popupVisible = !this.popupVisible
            const data = {
                token:this.$store.getters.token,
                sn:this.sn,
                key:this.key
            }
            if(!data.sn){
                Toast("请填写打印机编号(SN)")
                return;
            }else if(!data.key){
                Toast("请填写打印机密匙(KEY)")
                return;
            }
            addprinter(data).then(res=>{
                // console.log(res);
                Toast(res.msg);
                this.$store.commit("PRINTER",{sn:data.sn,key:data.key})
            })
        }
    }
}
</script>
<style scoped>
    .title{
        text-align: center;
        line-height: 3rem;
        font-size: 1.5rem;
    }
    .bottom{
        text-align: center;
        line-height: 2rem;
    }
    .mint-popup{
        border-radius: 10px;
        width: 90%;
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
</style>